<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到职途万里,请注册</title>
    <!-- <link href="https://static.zhipin.com/zhipin-sign/v62/static/css/app.879cca9c.css" rel="stylesheet" crossorigin="anonymous"> -->

    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/dev/plugins/layui/layui/css/layui.css">

    <link rel="stylesheet" href="/dev/assets/css/job/page/login.css">
    <link rel="icon" href="/dev/assets/img/geek-job/wanli.jpg" type="image/x-icon">
    <!--    <link rel="stylesheet" href="../../../assets/css/job/page/login.css">-->

    <style>
        /*.logins {*/
        /*    display: none !important;*/
        /*}*/

        /*.login {*/
        /*    display: block;*/
        /*}*/

        /*#nav_img {*/
        /*    height: 48px;*/
        /*    width: 48px;*/
        /*    border-radius: 50%;*/
        /*}*/

        /*.main {*/
        /*    width: 500px;*/
        /*    padding-top: 30px;*/
        /*    margin: auto;*/
        /*}*/

        /*span {*/
        /*    width: 150px;*/
        /*    height: 33px;*/
        /*}*/

        .error {
            font-size: 12px;
            color: red;
        }

        .success {
            font-size: 12px;
            color: green;
        }
    </style>

</head>
<body>
<div id="wrap">
    <div class="page-sign" style="border-radius: 15px; margin-left: 3px; margin-right: 3px;">
        <div id="header">
            <div class="tel">
                <i class="layui-icon layui-icon-cellphone"></i>
                客户服务热线: 400 065 5799
            </div>
        </div>
        <div class="login-register-unite">
            <div class="side-slide-box">
                <a href="#" class="logo">
                    <img src="/dev/assets/img/logo.jpg" alt="" style="border-radius: 8px;">
                    <div class="desc">
                        <em>想找工作</em>
                        <p>就来职途万里，唯一首选</p>
                    </div>
                </a>
                <ul class="desc-list">
                    <li>
                        <i class="icon icon-chat"></i>
                        <em>沟通</em>
                        <span>在线职位及时沟通</span>
                    </li>
                    <li>
                        <i class="icon icon-select"></i>
                        <em>任性选</em>
                        <span>各大行业职位任你选</span>
                    </li>

                </ul>
            </div>
            <div class="login-register-content">
                <div class="btn-sign-switch unm-switch">
                    <div class="switch-tip">
                        账号密码登录
                    </div>
                </div>
                <div class="login-phone-wrapper">
                    <h3 class="title">验证码登录/注册</h3>
                    <span class="sub-title">首次验证通过即自动注册职途万里账号</span>
                    <div class="sms-form-wrapper">
                        <ul class="identity-tab">
                            <li class="active">我要找工作</li>
                            <li class="">我要招聘</li>
                        </ul>
                        <div class="sms-form-row">
                            <div class="phone-input-wrapper">
                                    <span class="dropdown-select">
                                        +86
                                    </span>
                                <span class="ipt-wrap">
                                        <input type="tel" id="username" placeholder="手机号">
                                    </span>
                                <span class="dropdown-menu">
                                        <ul>
                                            <li>
                                                <span class="num">+86</span>
                                                中国大陆
                                            </li>
                                            <li>
                                                <span class="num"></span>
                                                非中国大陆手机
                                            </li>
                                        </ul>
                                    </span>
                            </div>
                        </div>
                        <div class="sms-form-row">
                            <div class="sms-input-wrapper">
                                    <span class="ipt-wrap">
                                        <input type="text" id="password" placeholder="短信验证码" maxlength="6">
                                        <div class="btn-sms">
                                            <button id="getCodeBtn" onclick="getCode()"
                                                    style="border: none;background-color: #FFFFFF">获取验证码</button>
                                            <!--                                            <span id="btn-s" type="button">发送验证码</span>-->
                                        </div>
                                    </span>
                                <div class="verify-row-code"
                                     style="opacity: 0;min-height: unset;height: 0;overflow: hidden;">

                                </div>
                            </div>
                        </div>

                        <div class="sms-form-btn">
                            <button type="button" class="sure-btn" id="TlbIndex" onclick="t()">登录/注册</button>
                        </div>
                        <div class="wx-login-area">

                            <li><a href="#" data-toggle="modal" data-target="#myModal">还没有账号？点击注册</a></li>
                        </div>
                        <div class="login-policy-wrapper">
                                <span class="agree-policy-wrapper">
                                    <input type="checkbox" id="agree-checkbox" class="agree-policy" value="a">
                                    <i class="checkbox-edging"></i>
                                </span>
                            已阅读并同意职途万里
                            <a href="">《用户协议》</a>
                            <a href="">《隐私政策》</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户注册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">账号</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="uname" id="uname" placeholder="请输入用户名">
                        </div>
                        <div class="col-md-4">
                            <span class="init">* 必须输入数字或字母,长度是6~12位</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-md-6">
                            <input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入密码">
                        </div>
                        <div class="col-md-4">
                            <span class="init">* 必须包含至少一个大写字母、一个小写字母、一个数字，长度为8-16位</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">确认密码</label>
                        <div class="col-md-6">
                            <input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="确认密码">
                        </div>
                        <div class="col-md-4">
                            <span class="init">* 必须和密码保持一致</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" id="btn_register" class="btn btn-info">注册</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--注册事件-->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/dev/plugins/layui/layui/layui.js"></script>
<script>
    // let agreeCheckbox = document.getElementById("agree-checkbox");
    $(function () {

        $("#uname")[0].onblur = function () {
            //每个input对应的span
            //span对应的js对象
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()

            let jsaccount = $("#uname").val();
            console.log(jsaccount)

            //1. 优先先校验规则
            let reg = /^[a-zA-Z0-9]{6,12}$/
            if (reg.test(value)) {
                let flag = false;
                //校验是否可用的.
                //原生的jquery - ajax写法
                $.ajax({
                    headers:{
                        "id":localStorage.getItem("id"),
                        "token":localStorage.getItem("token")
                    },
                    type: 'get',
                    url: `/dev/jobSeeker/checkAccount/${jsaccount}`,
                    async: false,
                    success: function (result) {
                        if (result.code == 200) {
                            $(span).attr("class", "success")
                            $(span).html("* " + result.msg)
                            flag = true;
                        } else {
                            $(span).attr("class", "error")
                            $(span).html("* " + result.msg)
                            flag = false
                        }
                    }
                })
                return flag;
            } else {
                $(span).attr("class", "error")
                $(span).html("* 必须输入数字或字母,长度是6~12位")
                return false;
            }
        }
        $("#pwd")[0].onblur = function () {
            let value = $(this).val();
            let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/
            let span = $(this).parent().next().children()[0]//span对应的js对象
            if (reg.test(value)) {
                $(span).attr("class", "success")
                $(span).html(" √")
                return true;
            } else {
                $(span).attr("class", "error")
                $(span).html("* 必须包含至少一个大写字母、一个小写字母、一个数字，长度为8-16位")
                return false;
            }
        }

        $("#pwd2")[0].onblur = function () {
            let pwd2Value = $(this).val();
            let pv = $("#pwd").val()
            let span = $(this).parent().next().children()[0]//span对应的js对象
            if (pwd2Value != "" && pwd2Value == pv) {
                $(span).attr("class", "success")
                $(span).html(" √")
                return true;
            } else {
                $(span).attr("class", "error")
                $(span).html("* 必须和密码保持一致")
                return false;
            }
        }

        $(function () {
            layui.use('layer', function () {
                layer = layui.layer;
            });
        })

        //注册按钮
        $("#btn_register").click(function () {

            let uname = $("#uname");
            let pwd = $("#pwd");
            let pwd2 = $("#pwd2");

            let jsaccount = uname.val();
            let jscipher = pwd.val();

            console.log(jsaccount + "============" + jscipher)

            if (uname[0].onblur() & pwd[0].onblur() & pwd2[0].onblur()) {
                //jquery的写法--$.get $.post //  ajax原生写法 $.ajax
                $.post(`/dev/jobSeeker/register/${jsaccount}/${jscipher}`, function (result) {
                    if (result.code == 200) {
                        layer.msg('恭喜你,注册成功了', {icon: 6})

                        setTimeout(function () {
                            window.location = '/dev/views/job/page/login.html';
                        }, 1500)

                    } else {
                        layer.msg('注册失败', {icon: 5})
                    }

                })
            }
        })
    })

</script>


<script>
    let sign = document.querySelector(".unm-switch")
    sign.addEventListener('click', function () {
        if (sign.classList.contains('unm-switch')) {
            this.className = 'btn-sign-switch phone-switch'
            this.children[0].innerHTML = "验证码登录"
            this.nextElementSibling.children[0].innerHTML = '<h3 class="title">账号密码登录/注册</h3>'
            this.nextElementSibling.children[2].children[1].children[0].className = 'username-input-wrapper'
            this.nextElementSibling.children[2].children[1].children[0].innerHTML = '<span class="ipt-wrap"><input type="text" id="js_account" placeholder="用户名"></span>'
            this.nextElementSibling.children[2].children[2].children[0].innerHTML = '<span class="ipt-wrap"><input type="password" id="js_cipher" placeholder="密码" maxlength="16"></span>'
            this.nextElementSibling.children[2].children[3].innerHTML = '<button type="button" id="login_btn" class="sure-btn" onclick="o()">登录</button>'
        } else {
            this.className = 'btn-sign-switch unm-switch'
            this.children[0].innerHTML = "账号密码登录"
            this.nextElementSibling.children[0].innerHTML = '<h3 class="title">验证码登录/注册</h3>'
            this.nextElementSibling.children[2].children[1].children[0].className = 'phone-input-wrapper'
            this.nextElementSibling.children[2].children[1].children[0].innerHTML = '<span class="dropdown-select">+86</span><span class="ipt-wrap"><input type="tel" id="username" placeholder="手机号"></span><span class="dropdown-menu"><ul><li><span class="num">+86</span>中国大陆</li><li><span class="num"></span>非中国大陆手机</li></ul></span>'
            this.nextElementSibling.children[2].children[2].children[0].innerHTML = '<span class="ipt-wrap"><input type="text" placeholder="短信验证码" id="password" maxlength="6"><div class="btn-sms" type="button" onclick="x()"><span >发送验证码</span></div></span>'
            this.nextElementSibling.children[2].children[3].innerHTML = '<button type="button"  class="sure-btn" >登录/注册</button>'

        }
    });

    let tab_click = document.querySelector(".identity-tab")
    let desc_list = document.querySelector(".desc-list")
    tab_click.children[0].onclick = function () {
        tab_click.children[0].className = 'active'
        tab_click.children[1].className = ''
        desc_list.innerHTML = '<li><i class="icon icon-chat"></i><em>沟通</em><span>在线职位沟通</span></li><li><i class="icon icon-select"></i><em>任性选</em><span>各大行业职位任你选</span></li>'
    }
    tab_click.children[1].onclick = function () {
        tab_click.children[1].className = 'active'
        tab_click.children[0].className = ''
        desc_list.innerHTML = '<li><i class="icon icon-invite"></i><em>招聘效果好</em><span>与职场牛人在线开聊</span></li><li><i class="icon icon-match"></i><em>人才匹配度高</em><span>获取更精准的牛人</span></li><li><i class="icon icon-online"></i><em>更多在线牛人</em><span>入职速度快</span></li>'
    }
    let checked = document.querySelector(".agree-policy-wrapper")

    checked.addEventListener('click', function () {
        // if (checked.classList.contains('is-check')) {
        //     checked.classList.remove('is-check');
        // } else {
        //
        //     checked.classList.add('is-check');
        // }
    });

</script>

<script>
    let agreeCheckbox = document.getElementById("agree-checkbox");

    agreeCheckbox.onclick=function (){
        if (checked.classList.contains('is-check')) {
            checked.classList.remove('is-check');
        } else {

            checked.classList.add('is-check');
        }
        // console.log("点击了")
        // console.log(agreeCheckbox)
        // console.log(agreeCheckbox.checked)
    }

    function o() {
        if (agreeCheckbox.checked) {
            if (tab_click.children[0].className == 'active') {
                console.log("求职端")
                let jsaccount = $("#js_account").val();
                let jscipher = $("#js_cipher").val();

                console.log(jscipher.toString())

                let agreeCheckbox = document.getElementById("agree-checkbox")
                console.log(agreeCheckbox.checked)
                $.ajax({
                    headers:{
                        "id":localStorage.getItem("id"),
                        "token":localStorage.getItem("token")
                    },
                    type: 'post',
                    url: `/dev/jobSeeker/login`,
                    data: {"jsaccount": jsaccount, "jscipher": jscipher.toString()},
                    async: false,
                    success: function (result) {
                        console.log(result)
                        if (result.code == 200) {
                            //将token放入到本地存储中
                            // localStorage.setItem("token", result.data);
                            var userId = result.count;
                            var token = result.data
                            localStorage.setItem("token",token)
                            localStorage.setItem('id', userId);

                            window.location = '/dev/views/job/page/home.html';
                        }
                    }
                })
            } else {
                console.log("招聘端")

                let jrAccount = $("#js_account").val();
                let jrCipher = $("#js_cipher").val();

                let agreeCheckbox = document.getElementById("agree-checkbox")
                $.ajax({
                    headers:{
                        "id":localStorage.getItem("id"),
                        "token":localStorage.getItem("token")
                    },
                    type: 'post',
                    url: `/dev/RecruiterLogin/jrLogin/${jrAccount}/${jrCipher}`,
                    async: false,
                    success: function (result) {

                        console.log(result)
                        if (result.code == 200) {
                            //将token放入到本地存储中
                            var userId = result.count;
                            var token = result.data
                            localStorage.setItem('jrtoken',token)
                            localStorage.setItem('jrid', userId);

                            window.location = '/dev/views/employment/index.html';
                        }
                    }
                })
            }
        }
    }
</script>

<script>
    $("#username").blur(function (){
        let reg = /^1[3-9]\d{9}$/;
        console.log($("#username").val())
        if (!reg.test($("#username").val())){
            $("#username").val("")
        }
    })



    let agreeCheckboxs = document.getElementById("agree-checkbox");
    let remainTime = 60; // 倒计时总时长

    function getCode() {
        if (!document.getElementById('getCodeBtn').disabled) {
            // 向服务器发送请求，获取验证码
            // 如果请求成功，返回success，否则返回fail
            let result = 'success'; // 假设请求成功

            console.log("=1=")
            if (tab_click.children[0].className == 'active') {
                console.log("求职端")
                let username = $("#username").val();
                let agreeCheckbox = document.getElementById("agree-checkbox")
                console.log(agreeCheckbox.checked)
                if (username!=""){
                    $.ajax({
                        headers:{
                            "id":localStorage.getItem("id"),
                            "token":localStorage.getItem("token")
                        },
                        type: 'post',
                        url: `/dev/sendMessage/SendSMS/${username}`,
                        // data: `{"username":username}`,
                        // data: {"jsaccount": jsaccount, "jscipher": jscipher.toString()},
                        async: false,
                        success: function (result) {
                            // console.log(result)

                            if (result.code == 200) {
                                // 将按钮设置为不可用状态
                                document.getElementById('getCodeBtn').disabled = true;
                                // 开始倒计时
                                let timer = setInterval(function () {
                                    remainTime--;
                                    // 更新按钮文本
                                    document.getElementById('getCodeBtn').textContent = '重新获取(' + remainTime + 's)';
                                    // 倒计时结束
                                    if (remainTime === 0) {
                                        clearInterval(timer);
                                        // 还原按钮文本和状态
                                        document.getElementById('getCodeBtn').textContent = '获取验证码';
                                        document.getElementById('getCodeBtn').disabled = false;
                                        remainTime = 60; // 重置倒计时总时长
                                    }
                                }, 1000);
                            } else {
                                if (result.code == 500){
                                    // 如果请求失败，弹出提示框
                                    alert('获取验证码失败');
                                }
                                if (result.code == 502){
                                    alert("发送频繁")
                                }

                            }



                        }
                    })
                }
            } else {
                console.log("招聘端")
                let usernames = $("#username").val();
                let agreeCheckbox = document.getElementById("agree-checkbox")
                if (usernames!=""){
                    console.log(usernames)
                    $.ajax({
                        headers:{
                            "id":localStorage.getItem("id"),
                            "token":localStorage.getItem("token")
                        },
                        type: 'post',
                        url: `/dev/JrLogin/SendSMS/${usernames}`,
                        async: false,
                        success: function (result) {

                            if (result.code == 200) {
                                // 将按钮设置为不可用状态
                                document.getElementById('getCodeBtn').disabled = true;
                                // 开始倒计时
                                let timer = setInterval(function () {
                                    remainTime--;
                                    // 更新按钮文本
                                    document.getElementById('getCodeBtn').textContent = '重新获取(' + remainTime + 's)';
                                    // 倒计时结束
                                    if (remainTime === 0) {
                                        clearInterval(timer);
                                        // 还原按钮文本和状态
                                        document.getElementById('getCodeBtn').textContent = '获取验证码';
                                        document.getElementById('getCodeBtn').disabled = false;
                                        remainTime = 60; // 重置倒计时总时长
                                    }
                                }, 1000);
                            } else {
                                if (result.code == 500){
                                    // 如果请求失败，弹出提示框
                                    alert('获取验证码失败');
                                }
                                if (result.code == 502){
                                    alert("发送频繁")
                                }

                            }

                            console.log(result)
                        }
                    })
                }
            }
        }

    }

    let agreeCheckboxx = document.getElementById("agree-checkbox");

    function t() {
        console.log(agreeCheckboxs.value)
        console.log("=1=")
        if (agreeCheckboxx.checked) {
            if (tab_click.children[0].className == 'active') {

                console.log("求职端")
                let username = $("#username").val();
                let password = $("#password").val();
                let agreeCheckbox = document.getElementById("agree-checkbox")
                console.log(agreeCheckbox.checked)
                $.ajax({
                    headers:{
                        "id":localStorage.getItem("id"),
                        "token":localStorage.getItem("token")
                    },
                    type: 'post',
                    url: `/dev/sendMessage/checkSMSCode/${username}/${password}`,
                    async: false,
                    success: function (result) {
                        console.log(result)
                        if (result.code == 200) {
                            //将token放入到本地存储中
                            // localStorage.setItem("token", result.data);
                            var userId  = result.count
                            var token = result.data;
                            localStorage.setItem('id', userId);
                            localStorage.setItem('token',token);
                            window.location = '/dev/views/job/page/home.html';
                        }
                    }
                })
            } else {
                console.log("招聘端")
                let username = $("#username").val();
                let password = $("#password").val();
                let agreeCheckbox = document.getElementById("agree-checkbox")
                $.ajax({
                    headers:{
                        "id":localStorage.getItem("jrid"),
                        "token":localStorage.getItem("jrtoken")
                    },
                    type: 'post',
                    url: `/dev/JrLogin/checkSMSCode/${username}/${password}`,
                    async: false,
                    success: function (result) {
                        console.log(result)
                        if (result.code == 200) {
                            var token = result.data
                            var userId = result.count;
                            localStorage.setItem('jrtoken',token)
                            localStorage.setItem('jrid', userId);

                            window.location = '/dev/views/employment/index.html';
                            // window.location = '/dev/views/job/page/welcome.html';
                        }
                    }
                })
            }
        } else {
            console.log("未勾选")
        }
    }


    // agreeCheckbox.addEventListener('click',function (){
    //     if (agreeCheckbox.value=='a'){
    //         agreeCheckbox.value='b'
    //     } else {
    //         agreeCheckbox.value='a'
    //     }
    // })
</script>

<!--<script >-->
<!--    var button = document.getElementById('btn');-->
<!--    button.onclick = function() {-->
<!--        button.disabled = 'disabled';-->
<!--        var time = 60;-->
<!--        var timer = setInterval(function() {-->
<!--            if (time == -1) {-->
<!--                clearInterval(timer)-->
<!--                button.disabled = '';-->
<!--                button.value = '获取验证码';-->
<!--            } else {-->
<!--                button.value = time + '秒后重新获取';-->
<!--                time&#45;&#45;;-->
<!--            }-->
<!--        }, 1000)-->
<!--    }-->
<!--</script>-->


</body>
</html>